<template>
  <a-modal
    title="預訂詳情"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
        <a-form-item
          label="預定流水號"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['ydNo']" />
        </a-form-item>
        <a-form-item
          label="房间编号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input  v-decorator="['roomCode']" />
        </a-form-item>
        <a-form-item
          label="预定人"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input  v-decorator="['reservation']" />
        </a-form-item>
        <a-form-item
          label="联系方式"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input  v-decorator="['phone']" />
        </a-form-item>
        <a-form-item
          label="最晚入住日期"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-date-picker   style="width: 100%"  v-decorator="['latestDate']"/>
        </a-form-item>
        <a-form-item
          label="收租周期"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input   v-decorator="['receiptCycle']" />
        </a-form-item>
        <a-form-item
          label="定金"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
         <a-input  v-decorator="['deposit']" />
        </a-form-item>
        <a-form-item
          label="收款日期"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-date-picker  style="width: 100%"  v-decorator="['collectionDate']"/>
        </a-form-item>
        <a-form-item
          label="收款方式"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input  v-decorator="['collectionTypeName']" />
        </a-form-item>
      <a-form-item
          label="經辦人"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input  v-decorator="['createUserName']" />
        </a-form-item>
        <a-form-item
          label="經辦時間"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input  v-decorator="['createTime']" />
        </a-form-item>
        <a-form-item
          label="備注"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-textarea  v-decorator="['remark']" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import moment from 'moment'
  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        roomIdData: [],
        latestDateDateString: '',
        collectionDateDateString: '',
        collectionTypeData: [],
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this)
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (record) {
        this.visible = true
        const roomIdOption = this.$options
        this.roomIdData = roomIdOption.filters['dictData']('common_status')
        const collectionTypeOption = this.$options
        this.collectionTypeData = collectionTypeOption.filters['dictData']('cost_type')
        setTimeout(() => {
          this.form.setFieldsValue(
            {
              id: record.id,
              ydNo: record.ydNo,
              roomCode: record.roomCode,
              reservation: record.reservation,
              phone: record.phone,
              deposit: record.deposit,
              collectionDate: record.collectionDate,
              collectionTypeName: record.collectionTypeName,
              receiptCycle: record.receiptCycle,
              createUserName: record.createUserName,
              createTime: record.createTime,
              remark: record.remark
            }
          )
        }, 100)
        // 时间单独处理
        if (record.latestDate != null) {
            this.form.getFieldDecorator('latestDate', { initialValue: moment(record.latestDate, 'YYYY-MM-DD') })
        }
        this.latestDateDateString = moment(record.latestDate).format('YYYY-MM-DD')
        // 时间单独处理
        if (record.collectionDate != null) {
            this.form.getFieldDecorator('collectionDate', { initialValue: moment(record.collectionDate, 'YYYY-MM-DD') })
        }
        this.collectionDateDateString = moment(record.collectionDate).format('YYYY-MM-DD')
      },
      handleSubmit () {
         this.handleCancel()
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
<style lang="less" scoped>
</style>
